<template>
    <div class="owl-item" :style="{ width: itemWidth + 'px', marginRight: margin + 'px' }">
        <div class="courses-item">
            <div class="img-part">
                <img :src="item.image" :alt="item.title">
            </div>
            <div class="content-part">
                <h4 class="title mt-20 mb-15 text-ellipsis">
                    <a :href="item.link" :title="item.title">{{ item.title }}</a>
                </h4>
                <div class="images text-ellipsis-3">{{ item.content }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// import '@/assets/css/public.css'
// import '@/assets/css/main.css'
import { defineProps } from 'vue';

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    itemWidth: Number,
    margin: Number
});
</script>
<style lang="scss" scoped>
.img-part {
    width: 100%;
    max-height: 350px;
    text-align: center;
    display: block;
    border-radius: 3px;
    overflow: hidden;
}
</style>